<template>
  <div class="userDialog">
    <!-- 显示用户详细信息 -->
    <el-dialog
      :visible.sync="isUserDetailInfo"
      :title="title"
      :close-on-click-modal="false"
      width="700px"
    >
      <el-form label-position="left" label-width="100px" ref="form" :model="userDetailInfo">
        <el-form-item label="用户编号">
          <el-input v-model="userDetailInfo.userNo" :readonly="!isModifyUserDetailInfo"></el-input>
        </el-form-item>
        <el-form-item label="用户住址">
          <el-input v-model="userDetailInfo.userAddr" :readonly="!isModifyUserDetailInfo" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户姓名">
          <el-input v-model="userDetailInfo.userName" :readonly="!isModifyUserDetailInfo"></el-input>
        </el-form-item>
        <el-form-item label="用水类型">
          <el-radio-group v-model="userDetailInfo.userType" :disabled="!isModifyUserDetailInfo">
            <el-radio-button :label="1">居民用水</el-radio-button>
            <el-radio-button :label="2">工业用水</el-radio-button>
            <el-radio-button :label="3">行政事业单位用水</el-radio-button>
            <el-radio-button :label="4">商业用水</el-radio-button>
            <el-radio-button :label="5">特种行业用水</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="userDetailInfo.userTel" :readonly="!isModifyUserDetailInfo"></el-input>
        </el-form-item>
        <!-- <el-form-item label="备用电话">
          <el-input v-model="userDetailInfo.userPhone" :readonly="!isModifyUserDetailInfo"></el-input>
        </el-form-item>
        <el-form-item label="银行账号">
          <el-input v-model="userDetailInfo.bankAccount" :readonly="!isModifyUserDetailInfo"></el-input>
        </el-form-item>
        <el-form-item label="银行户名">
          <el-input v-model="userDetailInfo.bankOwner" :readonly="!isModifyUserDetailInfo"></el-input>
        </el-form-item>
        <el-form-item label="开户行">
          <el-input v-model="userDetailInfo.bankAddr" :readonly="!isModifyUserDetailInfo"></el-input>
        </el-form-item> -->
        <!-- <el-form-item>
          <template>
            <el-button type="primary" plain @click="modifyUserDetailInfo()">修改信息</el-button>
            <el-button type="info" plain @click="cancelModifyUserDetailInfo()">取消修改</el-button>
            <el-button type="success" plain @click="updateUserDetailInfo(userDetailInfo)">保存修改</el-button>
          </template>
        </el-form-item> -->
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import bus from "./bus";
import {
  getUserDetailInfo,
  modifyUserDetailInfo
} from "../../../../api/api";
export default {
  data() {
    return {
      title: "",
      isUserDetailInfo: false,
      isModifyUserDetailInfo: false,
      userDetailInfo: {}
    };
  },

  methods: {
    // 获取用户信息
    getUserDetailInfo(msg) {
      let that = this;
      that.title = "用户详细信息";
      that.isUserDetailInfo = true;
      that.isModifyUserDetailInfo = false;
      let Msg = { userId: msg.userId };
      getUserDetailInfo(Msg)
        .then(function(res) {
          if (res.data.code === "200") {
            that.userDetailInfo = res.data.data;
          } else {
            that.Error("获取用户" + row.userId + "信息失败！");
          }
        })
        .catch(function(err) {
          // that.Error(err);
        });
    },

    // 修改指定用户信息
    modifyUserDetailInfo() {
      let that = this;
      that.title = "修改用户详细信息";
      that.isModifyUserDetailInfo = true;
    },

    // 取消修改用户信息
    cancelModifyUserDetailInfo() {
      let that = this;
      that.isUserDetailInfo = false;
    },

    // 提交修改之后的用户信息
    updateUserDetailInfo(userDetailInfo) {
      let that = this;
      that
        .$confirm("此操作将修改用户的信息，是否继续？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          modifyUserDetailInfo(userDetailInfo)
            .then(function(res) {
              if (res.data.code === "200") {
                that.Success("修改用户信息成功！");
              } else {
                that.Error("修改用户信息失败！");
              }
            })
            .catch(function(err) {
              // that.Error(err);
            });
          that.isUserDetailInfo = false;
        })
        .catch(() => {
          that.Info("已取消修改！");
        });
    },

    /**
     * 提示框
     */
    Success(str) {
      this.$alert(String(str), "提示", {
        confirmButtonText: "确定",
        type: "success"
      });
    },
    Info(str) {
      this.$alert(String(str), "提示", {
        confirmButtonText: "确定",
        type: "info"
      });
    },
    Warning(str) {
      this.$alert(String(str), "提示", {
        confirmButtonText: "确定",
        type: "warning"
      });
    },
    Error(str) {
      this.$alert(String(str), "提示", {
        confirmButtonText: "确定",
        type: "error"
      });
    }
  },

  mounted() {
    let that = this;
    bus.$on("getUserDetailInfo", msg => {
      that.getUserDetailInfo(msg);
    });
  }
};
</script>

<style scoped>
.el-button + .el-button {
  /* margin-left: 20px; */
  margin-left: 80px;
}
</style>
